import React, { useState, useEffect } from "react";

import { debounce2 } from "../utils/func";
let timer = null;
function List(props) {
  const [second, setSecond] = useState(10);
  const [disabled, setdisabled] = useState(false);
  const gotoset = () => {
    props.history.push("/detail/123");
  };
  // 处理验证码
  const handleClick = () => {
    setdisabled(true);
    if (timer) {
     clearInterval(timer);
    }
    timer = setInterval(() => {
      setSecond((t) => {
        let a = t - 1;
        if (t <= 0) {
          setdisabled(false);
          clearInterval(timer);
          return 10; // 重置second
        } else {
          return a; // --t
        }
      });
    }, 1000);
  };

  const hanlder = debounce2(handleClick, 3000, true);

  useEffect(() => {
    clearInterval(timer);
    return () => clearInterval(timer);
  }, []);

  return (
    <div>
      <h1>我是列表页</h1>
      {/* ul>li*3{我是第$个} */}
      <ul onClick={gotoset}>
        <li>我是第1个</li>
        <li>我是第2个</li>
        <li>我是第3个</li>
      </ul>
      <button onClick={hanlder} disabled={disabled}>
        点击
      </button>
      <p>{second < 10 ? `验证码已发送${second + 1}s` : "重新发送验证码"}</p>
    </div>
  );
}

export default List;
